<template>
	<div style="margin-top: 10px">
		<el-container>
			<el-header>
				<div>
					<el-input placeholder="请输入班级名称进行搜索..." prefix-icon="el-icon-search"
							  clearable
							  @clear="loadClassInfo"
							  style="width: 200px;margin-right: 10px" v-model="className"
							  @keydown.enter.native="selectClass" :disabled="showAdvanceSearchView"></el-input>
					<el-select v-model="majorName" style="width: 100px;margin-right: 10px" 
					placeholder="请选择专业" clearable @clear="loadClassInfo">
					    <el-option
					      v-for="item in major"
					      :key="item.majorName"
					      :label="item.majorName"
					      :value="item.majorName">
					    </el-option>
					  </el-select>
					  <el-select v-model="deptName" style="width: 100px;margin-right: 10px"
					  placeholder="请选择院系" clearable @clear="loadClassInfo">
					      <el-option
					        v-for="item in dept"
					        :key="item.deptName"
					        :label="item.deptName"
					        :value="item.deptName">
					      </el-option>
					    </el-select>
					<el-button icon="el-icon-search" type="primary" @click="selectClass" :disabled="showAdvanceSearchView">搜索</el-button>
				</div>
				<div>
					<el-button type="primary" icon="el-icon-plus" @click="showAddClassView">
						添加班级
					</el-button>
					<el-dialog
					      title="添加班级"
					      :visible.sync="diaClassVisible"
						  @close="clear">
						  <div>
					      <el-form :model={classForm} :rules="rules" style="text-align: left" ref="classForm">
							<el-form-item label="班级编号" prop="classNo">
							          <el-input size="mini" style="width: 150px" 
							  prefix-icon="el-icon-edit"   placeholder="请输入班级编号"
							  v-model="classForm.classNo" autocomplete="off"></el-input>
							        </el-form-item>
					        <el-form-item label="班级名称" prop="className">
					          <el-input size="mini" style="width: 150px" 
							  prefix-icon="el-icon-edit" 
							   placeholder="请输入班级名称"
							  v-model="classForm.className" autocomplete="off"></el-input>
					        </el-form-item>
							<el-form-item label="学生人数" prop="studentNumber">
							  <el-input size="mini" style="width: 150px" 
							  prefix-icon="el-icon-edit" 
							   placeholder="请输入学生人数"
							  v-model="classForm.studentNumber" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="所属专业" prop="majorName">
							  <el-input size="mini" style="width: 150px" 
							  prefix-icon="el-icon-edit" 
							   placeholder="请输入所属专业"
							  v-model="classForm.majorName" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="所属院系" prop="deptName">
							  <el-input size="mini" style="width: 150px" 
							  prefix-icon="el-icon-edit" 
							   placeholder="请输入所属院系"
							  v-model="classForm.deptName" autocomplete="off"></el-input>
							</el-form-item>
					      </el-form>
						  </div>
						   <span slot="footer" class="dialog-footer">
						      <el-button @click="diaClassVisible = false">取 消</el-button>
						      <el-button type="primary" @click="AddClassView('classForm')">确 定</el-button>
						   </span>
					</el-dialog>
				</div>
			</el-header>
			<el-main>
				
				<el-table 
					:data="classes"
	                stripe
					fit
	                overflow=auto
	                v-loading="loading"
	                element-loading-text="正在加载..."
	                element-loading-spinner="el-icon-loading"
	                element-loading-background="rgba(0, 0, 0, 0.8)"
	                style="width: 100%">
					<el-table-column type="selection" fixed="left"></el-table-column>
					<el-table-column prop="classNo" label="班级编号" align="center" fixed="left"></el-table-column>
					<el-table-column prop="className" label="班级名称" align="center" fixed="left"></el-table-column>
					<el-table-column prop="studentNumber" label="学生人数" align="center" fixed="left"></el-table-column>
					<el-table-column prop="deptName" label="所属院系" align="center" fixed="left"></el-table-column>
					<el-table-column label="操作" align="center" fixed="left">
						<template slot-scope="scope">
							<el-button style="padding: 7px" size="mini" 
							icon="el-icon-edit" @click="showEditClassView(scope.row)"></el-button>
							<el-button style="padding: 7px" size="mini" 
							type="danger" icon="el-icon-delete" @click="deleteClass(scope.row)"></el-button>
						</template>
					</el-table-column>
				</el-table>
				<div>
					<el-dialog
				      title="修改班级信息"
				      :visible.sync="diaEditVisible">
					  <div>
				      <el-form :model={classForm} :rules="rules" style="text-align: left" ref="classForm">
						<el-form-item prop="deptNo" style="height: 0">
						          <el-input type="hidden" v-model="classForm.classNo" autocomplete="off"></el-input>
						        </el-form-item>
				        <el-form-item label="班级名称" prop="className">
				          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入班级名称"
						  v-model="classForm.className" autocomplete="off"></el-input>
				        </el-form-item>
						<el-form-item label="学生人数" prop="studentNumber">
						  <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入学生人数"
						  v-model="classForm.studentNumber" autocomplete="off"></el-input>
						</el-form-item>
				      </el-form>
					  </div>
					   <span slot="footer" class="dialog-footer">
					      <el-button @click="diaEditVisible = false">取 消</el-button>
					      <el-button type="primary" @click="EditClassView('classForm')">确 定</el-button>
					   </span>
				</el-dialog>
				</div>
			</el-main>
			<el-footer>
				<div>
					<el-pagination
					  background
					  @current-change="currentChange"
					  @size-change="sizeChange"
					  layout="prev, pager, next, jumper, ->, total, slot"
					  :total="total">
					</el-pagination>
				</div>
								
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default{
		data() {
		    return {
		       classes: [],
			   major: [],
			   dept: [],
			   className:'',
			   deptName:'',
			   majorName:'',
			   loading: false,
			   total: 0,
			   page:1,
			   size:10,
			   showAdvanceSearchView: false,
			   title:'',
			   diaClassVisible : false,
			   diaEditVisible: false,
			   classForm: {
				   classNo:'',
				   className:'',
				   studentNumber:'',
				   deptName:'',
				   majorName:'',
			   },
			   rules: {
			   		className: [{
			   				  required: true,
			   				  message: '班级名称不能为空',
			   				  trigger: blur
			   				},
			   				{min:1,max:15,message:'长度在1到15个字符之间'}
			   				],
			   			}
		    }
		},
		mounted: function(){
			this.loadClassInfo();
			this.loadMajor();
			this.loadDeptName();
		},
		methods: {
			deleteClass(data){
				this.$confirm('此操作将永久删除【' + data.className + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/class/basic/" + data.classNo).then(resp => {
						if (resp) {
							this.$notify.info({
							  title: '消息',
							  message: resp.info
							});
							this.loadClassInfo();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			showEditClassView(resp){
					this.diaEditVisible = true;
					this.classForm = {
					  classNo:resp.classNo,
					  className:resp.className,
					  studentNumber:resp.studentNumber,
					};
				},
			updateClass(){				
				this.postRequest('/class/basic/updateClass',{
				  classNo:this.classForm.classNo,
				  className:this.classForm.className,
				  studentNumber:this.classForm.studentNumber,
				}).then(resp =>{
				  if(resp){
						this.$notify.info({
						  title: '消息',
						  message: resp.info
						});
						}
						this.diaEditVisible = false;
						this.loadClassInfo()();
					})
			},
			EditClassView(data){
				this.updateClass();
				this.title = '修改班级信息';
				this.classForm = data;
			},
			showAddClassView(){
				this.diaClassVisible = true;
			},
			clear () {
			     this.classForm = {
			        classNo:'',
					className:'',
					studentNumber:'',
					deptName:'',
					majorName:'',
			      }
			    },
			AddClassView(data){
				this.addClass();
				this.title = '添加班级';
				this.classForm = data;
			},
			addClass(){
				this.postRequest('/class/basic/addClass',{
				  classNo:this.classForm.classNo,
				  className:this.classForm.className,
				  studentNumber:this.classForm.studentNumber,
				  deptName:this.classForm.deptName,
				  majorName:this.classForm.majorName,
				}).then(resp =>{
				  if(resp){
						this.$notify.info({
						  title: '消息',
						  message: resp.info
						});
						}
						this.diaClassVisible = false;
						this.loadClassInfo();
					})
			},
			sizeChange(currentSize) {
				this.size = currentSize;
				this.loadClassInfo();
					},
			 currentChange(currentPage) {
				this.page = currentPage;
				this.loadClassInfo();
					},
			selectClass(){
				this.loading = true;
				let url = '/class/basic/selectClass?page=' + this.page +'&pageSize='+this.size;
				this.postRequest(url,{
				className : this.className,
				deptName:this.deptName,
				majorName:this.majorName,
				}).then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.classes = resp.classes;
					   this.total = resp.count;
				   }
				 })  
			},
			loadMajor(){
				this.loading = true;
				this.getRequest('/class/basic/majors').then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.major = resp;
				   }
			   })
			},
			loadDeptName(){
				this.loading = true;
				this.getRequest('/class/basic/deptNames').then(resp => {
					this.loading = false;
					if(resp){
						this.dept = resp;
					}
				})
			},
		    loadClassInfo(){
			   this.loading = true;
			   let url = '/class/basic/?page=' + this.page +'&pageSize='+this.size;
			   this.getRequest(url).then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.classes = resp.classes;
					   this.total = resp.count;
				   }
			   })
		   }
		}
	}
</script>

<style>
	.el-main {
	    color:  #E9EEF3;
	    line-height: 20px !important;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	.el-footer {
	    position:fixed;
		bottom:10px;
		left: 0;
		right: 0;
		line-height:60px;
	  }
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		text-align: center;
	}
</style>
